<div data-bind="visible: !waitForApproval()">
    <div id="canvas_container" class="canvas_container" tabindex="0" data-bind="event: { keydown: onKeyDown, mouseover: onMouseOver, mouseout: onMouseOut }">
        <input id="gcode_slider_layers" type="text">
        <canvas id="gcode_canvas" width="568" height="568"></canvas>
        <input id="gcode_slider_commands" type="text" style="width: 554px">
    </div>

    <div class="layer-buttons btn-group-toolbar row-fluid">
        <button type="button" class="btn btn-primary btn-medium span6" data-bind = "click: decrementLayer, enable: layerSelectionEnabled() && layerDownEnabled()">
            <i class="fas fa-arrow-left"></i>
            <span>{{ _('Previous layer') }}</span>
        </button>
        <button type="button" class="btn btn-primary btn-medium span6" data-bind = "click: incrementLayer, enable: layerSelectionEnabled() && layerUpEnabled()">
            <span>{{ _('Next layer') }}</span>
            <i class="fas fa-arrow-right"></i>
        </button>
    </div>

    <div class="progress progress-text-centered">
        <span class="progress-text-back" data-bind="text: ui_progress_text"></span>
        <div class="bar" style="width: 0;" data-bind="style: { width: ui_progress_percentage() + '%' }">
            <span class="progress-text-front" data-bind="copyWidth: ':parent :parent', text: ui_progress_text"></span>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span7">
            <h1>{{ _('Model info') }}</h1>
            <p data-bind="html: ui_modelInfo"></p>

            <h1>{{ _('Layer info') }}</h1>
            <p data-bind="html: ui_layerInfo"></p>
        </div>
        <div class="span5">
            <h1>{{ _('Renderer options') }}</h1>

            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_syncProgress">{{ _('Sync with job progress') }}
                </label>
            </p>
            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_centerViewport">{{ _('Center viewport on model') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_zoomOnModel">{{ _('Zoom in on model') }}
                </label>
            </p>

            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showMoves">{{ _('Show moves') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showRetracts">{{ _('Show retracts') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showPrinthead">{{ _('Show approx. print head position') }}
                </label>
            </p>

            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showPrevious">{{ _('Also show previous layer') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showCurrent">{{ _('Also show current layer') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showNext">{{ _('Also show next layer') }}
                </label>
            </p>

            <p>
                <button class="btn btn-block" data-bind="click: reload, enable: enableReload">{{ _('Reload') }}</button>
                <button class="btn btn-block" data-bind="click: resetViewport">{{ _('Reset viewport') }}</button>
            </p>

            <div class="advanced_options">
                <div><small><a href="#" class="muted" data-bind="toggleContent: { class: 'fa-caret-right fa-caret-down', parent: '.advanced_options', container: '.hide' }"><i class="fas fa-caret-right"></i> {{ _('Advanced options') }}</a></small></div>
                <div class="hide">
                    <p>
                        <label class="checkbox">
                            <input type="checkbox" data-bind="checked: renderer_showFullSize">{{ _('Show visited bounding box') }}
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" data-bind="checked: renderer_showBoundingBox">{{ _('Show printed bounding box') }}
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" data-bind="checked: renderer_showLayerBoundingBox">{{ _('Show layer bounding box') }}
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" data-bind="checked: renderer_showSegmentStarts">{{ _('Show segment starts') }}
                        </label>
                    </p>
                    <p>
                        <label class="checkbox">
                            <input type="checkbox" data-bind="checked: reader_hideEmptyLayers">{{ _('Hide empty layers') }} <span class="label">{{ _('Causes reload') }}</span>
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" data-bind="checked: reader_sortLayers">{{ _('Sort layers') }} <span class="label">{{ _('Causes reload') }}</span>
                        </label>
                    </p>
                    <p>
                        <button class="btn btn-block" data-bind="click: resetOptions">{{ _('Reset options') }}</button>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="muted">
        <small>{% trans %}
            Note that the time and usage values in this tab are <strong>estimated</strong> by the GCODE viewer in your
            browser and might differ from the values <strong>estimated</strong> by the server that are displayed in the
            "State" and "Files" panels in the sidebar due to slightly different implementations. Also note that these
            <strong>estimated</strong> values may be inaccurate since they can also take information present in the
            GCODE file into account.
        {% endtrans %}</small>
    </div>
</div>
<div data-bind="visible: waitForApproval">
    <h1>{{ _('Warning') }}</h1>
    {% trans %}<p>
        You've selected <strong data-bind="text: selectedFile.name"></strong> for printing which has a size of
        <strong data-bind="text: formatSize(selectedFile.size())"></strong>. Depending on your machine this
        might be too large for rendering and cause your browser to become unresponsive or crash.
    </p>

    <p>
        Are you sure you want to visualize this file nevertheless?
    </p>{% endtrans %}

    <button class="btn btn-warning btn-block" data-bind="click: approveLargeFile">
        {{ _('Yes, please visualize %(name)s regardless of its size', name='<span data-bind="text: selectedFile.name"></span>') }}
    </button>
</div>
